<template>
	<div class="city-group">
		<van-index-bar :index-list="indexList">
			<van-index-anchor index="热门" />
			<div class="list">
				<template v-for="(city, index) in groupData.hotCities" key="index">
					<div class="city">
						{{ city.cityName }}
					</div>
				</template>
			</div>
			<template v-for="(group, index) in groupData.cities" :key="index">
				<van-index-anchor :index="group.group" />
				<template v-for="(city, indey) in group.cities" :key="indey">
					<van-cell :title="city.cityName" />
				</template>
			</template>
		</van-index-bar>
	</div>
</template>

<script setup>
	import { computed } from "vue"
	const porps = defineProps({
		groupData: {
			type: Object,
			default: () => ({})
		}
	})

	const indexList = computed(() => {
		// map()结果是返回一个列表
		const list = porps.groupData.cities.map((item) => item.group)
		list.unshift("#")
		return list
	})
</script>

<style scoped>
	.list {
		display: flex;
		justify-content: space-around;
		padding: 10px;
		padding-right: 25px;
		flex-wrap: wrap;
	}
	.city {
		width: 70px;
		height: 28px;
		border-radius: 14px;
		font-size: 12px;
		color: #000;
		background-color: #fff4ec;
		text-align: center;
		line-height: 28px;
		margin: 5px 0;
	}
</style>
